<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
    .staggered-list-move {
        transition: all 1s;
        display: inline-block;
        margin-right: 10px;
    }
    
    .staggered-list-enter-active,
    .staggered-list-leave-active {
        transition: all 1s;
    }
    
    .staggered-list-enter,
    .staggered-list-leave-active {
        opacity: 0;
        transform: translateY(30px);
    }
    </style>
    <title>列表渐近过渡</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>

<body>
    <div id="app">
        <input v-model="query" placeholder="查询">
        <transition-group v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" tag="ul" name="staggered-list" v-bind:css="false">
            <li v-for="(item, i) in computedList" :key="item" :data-index="i">{{ item }}</li>
        </transition-group>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            query: '',
            items: ['Bruce Lee','Jackie Chan','Chuck Norris','Jet Li','Kung Fury']
        },
        computed: {
            computedList: function() {
                var vm = this
                return this.items.filter(function(item) {
                    return item.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
                })
            }
        },
        methods: {
            beforeEnter: function(el) {
                el.style.opacity = 0
                el.style.height = 0
            },
            enter: function(el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function() {
                    Velocity(el, {
                        opacity: 1,
                        height: '1.6em'
                    }, {
                        complete: done
                    })
                }, delay)
            },
            leave: function(el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function() {
                    Velocity(el, {
                        opacity: 0,
                        height: '0em'
                    }, {
                        complete: done
                    })
                }, delay)
            }
        }
    })
    </script>
</body>

</html>
